<template>
  <el-card style="padding: 20px">
    <div>
      <div id="top">
        <img :src="avatarUrl" />
        <div class="v-between">
          <div>
            <span
              style="font-size: 1.3em; color: #ff6400; cursor: pointer"
              @click="openFile"
              >上传头像</span
            >
            <input
              type="file"
              id="fileRef"
              @change="fileUpload"
              style="display: none"
            />
          </div>
          <div style="font-size: 0.8em">
            上传真实头像更容易得到求职者关注哦！
          </div>
        </div>
      </div>

      <div id="mid">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
          label-width="100px"
        >
          <div>
            <div>
              <el-form-item label="真实姓名" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="公司名" prop="companyName">
                <el-input v-model="form.companyName"></el-input>
              </el-form-item>
              <el-form-item label="职位" prop="position">
                <el-input v-model="form.position"></el-input>
              </el-form-item>
            </div>
          </div>
          <div id="bottom">
            <el-button type="primary" @click="submit" style="width: 100%"
              >确定</el-button
            >
            <slot />
          </div>
        </el-form>
      </div>
    </div>
  </el-card>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  props: ["employer"],
  emits: ["success"],
  data() {
    return {
      sex: 0,
      form: {
        name: "",
        companyName: "",
        position: "",
      },
      avatarUrl: this.employer.avatarUrl,
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入公司名", trigger: "blur" },
        ],
        position: [{ required: true, message: "请输入职位", trigger: "blur" }],
      },
    };
  },
  created() {
    if (this.employer != null) {
      this.form = this.employer;
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.username = sessionStorage.getItem("username");
          this.axios.post("/employer/update-info", this.form).then((res) => {
            if (res.data.code == 200) {
              ElMessage.success(res.data.data);
              this.$emit("success");
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 文件操作
    openFile() {
      document.getElementById("fileRef").click();
    },
    fileUpload() {
      const uploadFile = document.getElementById("fileRef").files[0];
      if (uploadFile) {
        const formData = new FormData();
        formData.append("file", uploadFile);
        formData.append("username", sessionStorage.getItem("username"));
        console.log(formData);
        this.axios.post("/upload/employer-avatar", formData).then((res) => {
          if (res.data.code === 200) {
            this.avatarUrl = res.data.data;
            localStorage.setItem("avatarUrl", this.avatarUrl);
          }
        });
      }
    },
  },
};
</script>

<style>
#top {
  padding: 0 30px;
  height: 80px;
  display: flex;
}
#top > img {
  height: 100%;
  border-radius: 100px;
}
.v-between {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 30px;
}
#bottom {
  display: flex;
  justify-content: center;
}
#mid {
  margin-top: 10px;
}
</style>